<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../day10_vue/js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<p>{{num}}</p>
			<input type="button" v-on:click="num++" value="增加按钮" />
			<input type="button" v-on:click="fnShow()" value="展示数据" />
			<ul v-for=" item in data1">
				<li>{{item}}</li>
			</ul>
			<ul v-for="(key,item1) in data2">
				<li>{{key}} {{item1}}</li>
			</ul>
			<input type="text" v-model="txt" />
			<p>你输入的内容是：{{txt}}</p>
			<select v-model="val">
				<option value="0">北京</option>
				<option value="1">上海</option>
				<option value="2">深圳</option>
			</select >{{val}}<br />
			<input type="radio" name="sex" checked="checked" v-model="value" value="男"/>男
			<input type="radio" name="sex" v-model="value" value="女"/>女{{value}}<hr />
			<input type="checkbox"  value=turu  v-model="fu"/>西瓜
			<input type="checkbox"  value="香蕉"  v-model="fu"/>香蕉
			<input type="checkbox"  value="苹果"  v-model="fu"/>苹果{{fu}}<hr />
			<input type="checkbox" v-model="xy" />{{xy}}<hr />
			<p>{{fnreverse}}</p>
		</div>
	</body>
	<script type="text/javascript">
		let vm = new Vue({
			el:"#app",
			data:{
				word:'hello',
				xy:true,
				fu:[],
				value:'',
				val:0,
				txt:'',
				num:'0',
				data1:["冬天到了",'天气凉了','天亮的迟了','这是个容易犯困的季节'],
				data2:{name:"张三",age:23}
			},
			methods:{
				fnShow:function(){
					alert(vm.num)
				},
				
			},
			computed:{// 表示比较复杂，尽量用计算属性
				fnreverse:function(){
				return this.word.split('').reverse().join('')
			}
			},
			watch:{//监听属性 ，第二个值为监听之前的值，第一个为监听之后的值
				num:function(val1,val2){
					console.log(val1,val2)
				}
			}
			
		})
		
	</script>
</html>
